<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2024/10/25
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>离职员工页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<%--===================================================搜索框========================================================--%>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="selectForm.staffid" placeholder="请输入员工编号搜索"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="selectForm.staffname" placeholder="请输入员工姓名搜索"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索<i class="el-icon-search el-icon--right"></i></el-button>
            <el-button type="primary" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
        </el-form-item>
    </el-form>
<%--================================================所有离职员工表单===================================================--%>
    <template>
        <el-table
                :data="staffList"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="staffid"
                    label="员工编号"
            >
            </el-table-column>
            <el-table-column
                    prop="staffname"
                    label="员工姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="idcard"
                    label="身份证号码">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="entrytime"
                    label="入职日期">
            </el-table-column>
            <el-table-column
                    prop="leavetime"
                    label="离职日期">
            </el-table-column>
            <el-table-column
                    prop="branch.branchname"
                    label="店名">
            </el-table-column>
            <el-table-column
                    prop="role.rolename"
                    label="职位名称">
            </el-table-column>
            <el-table-column
                    prop="department.deptname"
                    label="部门名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    prop="state"
                    label="状态"
                    width="120">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state==0"
                            type="danger"
                            effect="dark">
                        离职状态
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<%--=======================================================js代码====================================================--%>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            staffList:undefined,//所有离职员工信息
            selectForm:{},//搜索框数据
            currentPage: 1,//当前页码
            pageSize: 10,//每页显示条数
            total: 0,//总条数
        },
        created() {
            this.quitStaffList();//获取所有离职员工信息
        },
        methods: {
            // 获取所有离职员工信息
            quitStaffList(){
                axios.post("/quitStaff/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.selectForm).then(resp=>{
                    this.staffList=resp.data.data.list;//所有离职员工信息
                    this.total=resp.data.data.total;//总条数
                })
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 每页条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.quitStaffList();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.quitStaffList();
            },
            // 查询
            onSubmit() {
                this.quitStaffList();
            },
            //刷新
            refresh() {
                this.selectForm = {};//清空搜索框
                this.quitStaffList();//重新加载数据
            }
        }
    })
</script>
</html>
